<template>
	<!-- 圈子 -->
	<view class="container">
		<scroll-view class="scroll-view" scroll-y>
			<!-- <view class="group-c" :style="groupCStypeStr">
			<view class="group-list global-shadow">
				<view class="item" hover-class="hover"  @tap="$tool.toPage(`/pages/topic/topicList?title=${item.title}&groupId=${item.id}`)" v-for="(item, index) in groupList">
					<image mode="aspectFill" class="thumb" :src="item.thumb"></image>
					<view class="title">{{item.title}}</view>
					<view class="total">{{item.onstock_topics_count}}条动态</view>
				</view>
				<view class="item" @tap="$tool.toPage('/pages/topic/groupList')">
					<image mode="aspectFill" class="thumb" src="@/static/topic/add.png"></image>
					<view class="title">更多圈子</view>
					<view class="total">更多动态</view>
				</view>
			</view>
		</view> -->
			<!-- <view class="search_box"></view> -->
			<!-- 轮播图 -->
			<swiper class="image-content" :current="current" @change="swiperChange" :autoplay="autoplay">
				<swiper-item v-for="(item, index) in list" :key="index" class="swiper">
					<image :src="item.slideShows" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 小圆点 -->
			<view class="dots" :style="dotListStyle">
				<view class="dot-item" v-for="(item, index) in list" :key="index"
					:class="{ active: current === index }">
				</view>
			</view>
			<!-- 
				显示标题,link表示跳转的页面，isShowMore表示是否显示更多按钮，leftIcon表示左侧的图标，cssStyle表示自定义样式 
				cardTitle是自定义的标题组件，可以自定义标题的样式，
				:leftIcon如果在config.topic_icon中存在值，则使用该值作为图标链接，否则使用默认的图标
		-->
			<view class="topic-item-title" v-if="tagList.length != 0">
				<cardTitle title="火热话题"
					:leftIcon="config.tag_icon || 'https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/34711724227032035.jpg'"
					cssStyle="margin: 0rpx 30rpx">
				</cardTitle>
			</view>
			<!-- 
			可进行滚动的容器，里面循环展示一组标签项
			每个标签项包含一张缩略图和一个标题title，点击时会跳转到标签对应的页面 
			当用户点击列表项的时候，会调用$tool.toPage函数并传递标题和标签ID
			当鼠标悬停在列表项的时候，会添加一个额外的类名hover
			scroll-x是进行横向滚动
		-->
			<view class="" style="padding-right:50rpx;">
				<scroll-view class="tag-c" scroll-x>
					<view class="tag-list" v-if="tagList.length != 0">
						<view class="item" hover-class="hover" v-for="(item, index) in tagList">
							<view class="title">#{{ item.title }}</view>
							<image mode="aspectFill" class="thumb" :src="item.thumb"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="topic-item-title">
				<!-- 
				显示标题,link表示跳转的页面，isShowMore表示是否显示更多按钮，leftIcon表示左侧的图标，cssStyle表示自定义样式 
				cardTitle是自定义的标题组件，可以自定义标题的样式，
				:leftIcon如果在config.topic_icon中存在值，则使用该值作为图标链接，否则使用默认的图标
			-->
				<cardTitle title="最新分享"
					:leftIcon="config.topic_icon || 'https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/63591724227167017.webp'"
					class="topic-item-title" cssStyle="margin: 0rpx 30rpx"></cardTitle>
				<!-- 筛选按钮 -->
				<view class="filter-header" @click="toggleDropdown">
					<svg t="1706081762581" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="4220" width="32" height="32">
						<path
							d="M675.328 117.717333a21.333333 21.333333 0 0 1-16.341333 39.402667A382.762667 382.762667 0 0 0 512 128C299.925333 128 128 299.925333 128 512s171.925333 384 384 384 384-171.925333 384-384c0-51.114667-9.984-100.8-29.12-146.986667a21.333333 21.333333 0 0 1 39.402667-16.341333A425.429333 425.429333 0 0 1 938.666667 512c0 235.648-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333c56.746667 0 112 11.093333 163.328 32.384zM682.666667 384H362.666667l106.666666 142.229333v220.309334a21.333333 21.333333 0 1 1-42.666666 0.064v-206.165334L328.533333 409.6c-24.682667-32.896-7.104-68.266667 34.026667-68.266667h320.213333c41.130667 0 58.794667 35.264 34.026667 68.266667L618.666667 540.437333V640a21.333333 21.333333 0 1 1-42.666667-0.064v-113.706667L682.666667 384z"
							fill="#794cc3" p-id="4221"></path>
					</svg>
				</view>
			</view>
			<view class="topic-list">
				<topicItem class="item" :info="topic" v-for="(topic, index) in topicList"
					@like_or_cancel="likeOrCancelHandle"></topicItem>
				<NoMore></NoMore>
			</view>

			<!-- 
			根据isShowCreateBtn的值决定是否显示按钮，如果为true，显示按钮，否则不显示
			mode="widthFix"：宽度不变，高度自动变化，保持原始宽高比
			当用户点击按钮时，调用$tool.toPage方法跳转到指定页面
			图片的src属性值为config.create_icon，如果不存在，则使用默认的图片publish.png
		 -->
			<image v-if="isShowCreateBtn" class="publish-btn" mode="widthFix" @tap="$tool.toPage('/pages/topic/create')"
				:src="config.create_icon || 'https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/64251724225049819.png'">
			</image>
			<!-- 日期筛选框 -->
			<view v-if="isDropdownVisible" class="dropdown">

				<view class="dropdown-content">
					<text class="dropdown-sift">时间筛选</text>
					<!-- 起始时间-终止时间下拉框 -->
					<view class="time-range">
						<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
					</view>
					<!-- 重置和确认按钮 -->
					<view class="button-container">
						<button class="reset-button" @click="resetFilter">
							<text>重置</text>
						</button>
						<button class="confirm-button" @click="submitData()">
							<text>查询</text>
						</button>
					</view>
				</view>
			</view>
			<view class="dropdown-mask" v-if="isDropdownVisible" @click="hideDropdown"></view>
		</scroll-view>

	</view>
</template>

<script>
import topicItem from "./components/topicItem.vue"
export default {
	components: {
		topicItem
	},
	data() {
		return {
			dotListStyle: {},
			groupList: [],
			tagList: [],
			topicList: [],
			page: 1,
			isLoading: false,
			list: [],
			current: 0,
			autoplay: true, // 开启自动轮播
			interval: 2000, // 设置轮播间隔时间，单位为毫秒
			isDropdownVisible: false,
			range: [], // 日期范围
			filtrateTime: "", // 开始时间
			overTime: "", // 结束时间
		}
	},
	computed: {
		title() {
			return this.$store.getters.setting.topic_home.title || '未设置'
		},
		isShowCreateBtn() {
			return this.$store.getters.setting.topic_home.is_show_create_btn
		},
		config() {
			return this.$store.getters.setting.topic_home
		},
		groupCStypeStr() {
			let color = this.config.title_bg || '#ffcc00'
			return `background-image: linear-gradient(${color}, #fff)`
		},
		userInfo() {
			return this.$store.getters.userInfo
		}
	},
	watch: {
		title(val) {
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		config() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: this.config.title_bg || '#ffcc00'
			})
		}
	},

	onLoad() {
		uni.setNavigationBarTitle({
			title: this.title
		})
		uni.setNavigationBarColor({
			frontColor: '#000000',
			// backgroundColor属性根据this.config.title_bg的值来设置背景颜色，如果this.config.title_bg为空，则背景颜色为#ffcc00
			backgroundColor: this.config.title_bg || '#ffcc00'
		})

		uni.showLoading({
			title: '加载中'
		})
		this.initData().then(res => {
			this.loading = false
			uni.hideLoading()
		})
	},
	onShow() {
		console.log(this.page, 'this.page')
		this.initData()
		this.getImageIndex();
	},
	// onPullDownRefresh() {
	// 	this.$showPullRefresh()
	// 	// this.page++
	// 	this.initData()
	// },
	methods: {
		// onScroll(event) {
		// 	console.log(event);

		// 	const scrollTop = event.detail.scrollTop;
		// 	if (scrollTop + uni.getSystemInfoSync().windowHeight >= this.scrollHeight) {
		// 		console.log('已滑动到底部');
		// 	}
		// 	if (scrollTop === 0) {
		// 		console.log('已滑动到顶部');
		// 	}
		// },
		// // 监听触摸开始事件
		// onTouchStart(event) {
		// 	this.startY = event.touches[0].pageY;
		// 	this.scrollY = 0; // 重置滚动距离
		// },
		// // 监听触摸移动事件
		// onTouchMove(event) {
		// 	this.moveY = event.touches[0].pageY;
		// 	const deltaY = this.moveY - this.startY;
		// 	this.scrollY += deltaY; // 更新滚动距离

		// 	if (deltaY > 0) {
		// 		// 向下滑动
		// 		console.log('向下滑动');
		// 		if (this.scrollY >= this.maxScrollY) {
		// 			console.log('已滑动到底部');
		// 		}
		// 	} else {
		// 		// 向上滑动
		// 		console.log('向上滑动');
		// 		if (this.scrollY <= 0) {
		// 			console.log('已滑动到顶部');
		// 		}
		// 	}
		// },

		//首页轮播方法
		getImageIndex() {
			this.$http('/deleteUsers/selectSlideShow').then(res => {
				this.list = res.data
			})
		},
		// 轮播图切换时更新当前轮播图的索引
		swiperChange(event) {
			this.current = event.detail.current;
		},
		// changeSlide(index) {
		// 	this.current = index;
		// },
		async initData() {
			this.$http('/topic-groups', 'GET', {
				'per_page': 4
			}).then(res => {
				this.groupList = res.data
			})

			this.$http('/topic-tags', 'GET', {
				'per_page': 8
			}).then(res => {
				this.tagList = res.data
			})

			this.page = 1;
			this.getMoreTopicAllList()
			// return this.$http('/topics', 'GET', {
			// 	'per_page': 10
			// }).then(res => {
			// 	this.topicList = res.data.list
			// })
		},
		getMoreTopicAllList() {
			if (this.loading) {
				return false
			}
			this.loading = true
			// console.log(data);
			return this.$http('/topics/queryByPage', 'POST', {
				'pageSize': 10,
				'currentPage': this.page,
				'status': 1,
				'userId': this.userInfo.id
			}).then(res => {
				this.topicList = this.page > 1 ? [...this.opicList, ...res.data?.list] : res.data?.list || []
				this.loading = false
				// 判断是否还有更多数据，如果有则page+1，否则不变
				if (this.topicList.length < res.data?.total) {
					this.page++;
				}
				uni.hideLoading()
			}).catch(err => {
				this.loading = false
				uni.hideLoading()
			})
		},
		getMoreTopicList() {
			if (this.loading) {
				return false
			}
			this.loading = true
			return this.$http('/topics/queryByPageDate', 'POST', {
				'pageSize': 10,
				'currentPage': this.page,
				'status': 1,
				"filtrateTime": this.filtrateTime,
				"overTime": this.overTime
			}).then(res => {
				this.topicList = this.page > 1 ? [...this.opicList, ...res.data?.list] : res.data?.list || []
				this.loading = false
				// 判断是否还有更多数据，如果有则page+1，否则不变
				if (this.topicList.length < res.data?.total) {
					this.page++;
				}
				uni.hideLoading()
			}).catch(err => {
				this.loading = false
				uni.hideLoading()
			})
		},
		likeOrCancel(e) {
			let index = e.index
			let item = this.topicList[index]
			this.topicList[index].is_liked = !this.topicList[index].is_liked

			this.$http(`/topics/${item.uuid}/actions`, 'POST', {
				'type': 'like_or_cancel'
			})
		},
		likeOrCancelHandle(info) {
			this.topicList = this.topicList.map(item => {
				if (item.id === info.id) {
					return info
				}
				return item
			})
			this.page = 1;
			this.getMoreTopicAllList()
		},
		// 显示筛选部分
		toggleDropdown() {
			this.isDropdownVisible = !this.isDropdownVisible;
			if (this.isDropdownVisible) {
				document.body.style.overflow = 'hidden'; // 禁止滚动
			} else {
				document.body.style.overflow = ''; // 恢复滚动
			}
		},
		hideDropdown() {
			this.toggleDropdown();
		},
		// 查询
		submitData() {
			// 校验开始时间和结束时间是否为空
			if (!this.range.length) {
				uni.showToast({
					title: '请选择时间范围',
					icon: 'none',
					duration: 2000
				});
				return;
			} else {
				this.filtrateTime = this.range[0];
				this.overTime = this.range[1]
			}
			this.getMoreTopicList();
			this.toggleDropdown()
		},
		// 重置按钮
		resetFilter() {
			// 重置筛选时间逻辑
			this.filtrateTime = '';
			this.overTime = '';
			// 获取盒柜列表
			this.getMoreTopicAllList();
			this.toggleDropdown()
		},
	},
	onReachBottom() {
		if (this.overTime) {
			this.getMoreTopicList()
		} else {
			this.getMoreTopicAllList();
		}

	},
	onPullDownRefresh() {
		this.page = 1;
		this.getMoreTopicAllList()
		wx.stopPullDownRefresh()
	},
	onPageScroll(e) { },
}
</script>

<style lang="scss" scoped>
// 轮播图样式
.image-content {
	height: 420rpx;
	width: 86%;
	overflow: hidden;
	margin-left: 7%;

}

.swiper {
	width: 100% !important;
	height: 400rpx;
	transition: transform 0.5s ease-in-out;
	/* border: 1rpx solid white; */
	/* margin-left: 7%; */
	margin-top: 20rpx;
	/* border-radius: 20rpx; */

	image {
		width: 100% !important;
		height: 100%;
		transition: opacity 0.5s ease-in-out;
	}
}

//小圆点样式 
.dots {
	position: absolute;
	left: 0;
	top: 400rpx;
	z-index: 999;
	width: 100%;
	height: 8rpx;
	display: flex;
	justify-content: center;

	.dot-item {
		margin: 0 6rpx;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.6);
		transition: all 0.4s;

		&.active {
			border-radius: 6rpx;
			width: 26rpx;
			background-color: rgb(108, 67, 255);
		}
	}

}

.container {
	position: relative;
	height: 100vh;
	// background-color: #131313;
	background: url(../../static/bgColor.png) center/ cover no-repeat;
	overflow: auto;
	-webkit-overflow-scrolling: touch;

	.topic-item-title {
		position: -webkit-sticky;
		position: sticky;
		top: -20rpx;
		/* background: white; */
		// margin: 30rpx 0rpx;
		padding: 17rpx 0rpx;
		z-index: 100;

		.title-container {
			.text {
				color: white;
			}
		}
	}


	.topic-list {
		padding: 0rpx 30rpx;
		height: 500rpx;

		tag-list .item {
			padding-bottom: 20rpx;
			margin-bottom: 50rpx;
			border-bottom: 1rpx solid #E7E7E7;
		}
	}

	.tag-c {
		width: 100%;
		display: flex;
		white-space: nowrap;

		.tag-list {
			width: 100%;
			padding: 0rpx 0rpx 30rpx 0rpx;
			// white-space: nowrap;
			display: inline-flex !important;
			margin: 0 30rpx;
			height: 400rpx;

			.item {
				width: 500rpx;
				margin: 0 30rpx;
			}

			//小圆点样式 
			.title {
				color: #fff;
				font-weight: 100;
				margin-bottom: 10rpx;
			}

			.thumb {
				width: 500rpx;
				height: 350rpx;
			}
		}

		.dots {
			position: absolute;
			left: 0;
			top: 370rpx;
			z-index: 999;
			width: 100%;
			height: 8rpx;
			display: flex;
			justify-content: center;

			.dot-item {
				margin: 0 6rpx;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.6);
				transition: all 0.4s;

				&.active {
					border-radius: 6rpx;
					width: 26rpx;
					background-color: rgb(108, 67, 255);
				}
			}

		}

		.container {
			height: 100vh;
			background-color: #131313;
			background-image: url("../../pages/center/lineBg.png");
			/* background-color: #131313;
	background-image: url(".."../../pages/center/lineBg.png"); */
		}

		.topic-item-title {
			position: -webkit-sticky;
			position: sticky;

			top: -20rpx;
			/* background: white; */
			background-color: #151515;
			// margin: 30rpx 0rpx;
			padding: 30rpx 0rpx;
			z-index: 100;

			.title-container {
				.text {
					color: white;
				}
			}
		}


		.topic-list {
			padding: 0rpx 30rpx;

			.item {
				padding-bottom: 20rpx;
				margin-bottom: 50rpx;
				border-bottom: 1rpx solid #E7E7E7;
			}
		}

		.tag-c {
			width: 100%;
			white-space: nowrap;

			.tag-list {
				width: 100%;
				padding: 0rpx 0rpx 60rpx 0rpx;
				// white-space: nowrap;
				display: flex;
				margin-left: 30rpx;

				.item {
					// border: 1px solid blue;
					box-shadow: inset 0px 0px 10px 0px rgba(226, 222, 204, 0.4);
					padding: 10rpx 12rpx;
					border-radius: 20rpx;
					// display: flex;
					align-items: center;
					flex-direction: column;
					margin-right: 16rpx;

					.thumb {
						width: 198rpx;
						height: 238rpx;
						border-radius: 40rpx;
					}

					.title {
						font-size: 26rpx;
						font-weight: 500;
						color: white;
						line-height: 40rpx;
						margin-top: 10rpx;
						text-align: center;
						width: 200rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

		.group-c {
			width: 100%;
			// height: 236rpx;
			// background-image: linear-gradient(#ffcc00, #fff);
			padding: 10rpx 30rpx 0rpx 30rpx;
			box-sizing: border-box;

			.group-list {
				display: flex;
				background: white;
			}
		}

		//小圆点样式 
		.dots {
			position: absolute;
			left: 0;
			top: 370rpx;
			z-index: 999;
			width: 100%;
			height: 8rpx;
			display: flex;
			justify-content: center;

			.dot-item {
				margin: 0 6rpx;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.6);
				transition: all 0.4s;

				&.active {
					border-radius: 6rpx;
					width: 26rpx;
					background-color: rgb(108, 67, 255);
				}
			}

		}

		.container {
			height: 100vh;
			background-color: #131313;
			background-image: url("../center/lineBg.png");
		}

		.topic-item-title {
			position: -webkit-sticky;
			position: sticky;
			top: -20rpx;
			/* background: white; */
			// background-color: #151515;
			// margin: 30rpx 0rpx;
			padding: 30rpx 0rpx;
			z-index: 100;


			.title-container {
				.text {
					color: white;
				}
			}
		}


		.topic-list {
			padding: 0rpx 30rpx;


			.item {
				// border: 1px solid blue;
				box-shadow: inset 0px 0px 10px 0px rgba(226, 222, 204, 0.4);
				padding: 10rpx 12rpx;
				/* border-radius: 20rpx; */
				// display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 16rpx;

				.thumb {
					width: 198rpx;
					height: 238rpx;
					/* border-radius: 40rpx; */
				}

				.title {
					font-size: 26rpx;
					font-weight: 500;
					color: #fff;
					line-height: 40rpx;
					margin-top: 10rpx;
					text-align: center;
					width: 200rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.group-c {
		width: 100%;
		// height: 236rpx;
		// background-image: linear-gradient(#ffcc00, #fff);
		padding: 10rpx 30rpx 0rpx 30rpx;
		box-sizing: border-box;

		.group-list {
			display: flex;
			background: white;
			border-radius: 20rpx;
			justify-content: space-around;
			padding: 20rpx 0rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.thumb {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
				}

				.title {
					font-size: 22rpx;
					font-weight: 500;
					color: #fff;
					line-height: 26rpx;
					margin-top: 6rpx;
				}

				.total {
					font-size: 18rpx;
					font-weight: 500;
					color: #fff;
					line-height: 26rpx;
					margin-top: 8rpx;
				}
			}
		}
	}

	.publish-btn {
		width: 178rpx;
		// height: 178rpx;
		position: fixed;
		bottom: 100rpx;
		right: 20rpx;
	}
}

.filter-header {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: absolute;
	right: 32rpx;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 101;
}

// 搜索样式
.dropdown {
	height: 400rpx;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	position: fixed;
	// position: absolute !important;
	/* 将 fixed 改为 absolute */
	/* 修改这里 */
	/* top: 100%; */
	bottom: 0;
	display: block;
	/* 添加这一行 */
	/* width: 100%; */
	background-color: #fff !important;
	border: 1px solid #5d4748;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 999;
	display: flex;
	flex-direction: column;
}

.dropdown-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 998;
}

.dropdown-content {
	position: relative;
	z-index: 999;
}

.dropdown-sift {
	margin: 0 auto;
	font-size: 40rpx;
	font-weight: 900;
	padding-bottom: 20rpx;
	color: #000;
}

.button-container {
	width: 90%;
	border-radius: 50rpx;
	margin: auto;
	display: flex;
	justify-content: space-between;
}

.reset-button {
	width: 50%;
	height: 80rpx;
	color: #fff;
	border-radius: 50rpx 0 0 50rpx;
	background: rgb(108, 67, 255);
	display: flex;
	justify-content: center;
	align-items: center;

	text {
		line-height: 80rpx;
		font-size: 38rpx;
	}
}

.confirm-button {
	width: 50%;
	height: 80rpx;
	color: #fff;
	border-radius: 0 50rpx 50rpx 0;
	background: rgb(108, 67, 255);

	text {
		line-height: 80rpx;
		font-size: 38rpx;
	}
}

.time-range {
	height: 80rpx;
	padding: 50rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.search_box {
	height: 20rpx;
	position: relative;
}
</style>